import React from 'react'

import fetchjsonp from 'fetch-jsonp'

class FetchJsonp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            list: []
        };
    }

    getData = () => {
        var url = 'https://coding.imooc.com/class/ajaxsearchwords?_='+new Date().getTime();
        fetchjsonp(url, {jsonpCallbackFunction: "searchKeys"})
            .then((response) => {
                return response.json();
            })
            .then((json) => {
                console.log(json.data);
                console.log(Object.prototype.toString.call(json.data));
                
                this.setState({  
                    list: json.data
                })
            })
            .catch((error) => {
                console.log(error)
            })
    } 

    render() {
        return (
            <div>
                <h2>FetchJsonp从服务端获取数据</h2>
                <button onClick={this.getData}>获取数据</button>
                <br/>
                <hr/>
                <ul>
                    {
                        this.state.list.map((value, key) => {
                            return <li key={key}>{value.name}</li>
                        })      
                    }
                </ul>
            </div>
        );
    }
}

export default FetchJsonp;